﻿<!DOCTYPE html>
<html>
<head>
  <title>KataTodoList</title>
  <style type="text/css">
    body, input, button
    {
      font-family: Verdana;
      font-size: 12px;
    }
    
    .flagClass
    {
      text-decoration: line-through;
    }
  </style>
  <script src="../Scripts/jquery-1.7.2.js" type="text/javascript"></script>
  <script src="jquery.tmpl.js" type="text/javascript"></script>
  <script src="KataTodoList.js" type="text/javascript"></script>
  <script type="text/javascript">
    var todoList = new TodoList();

    $(document).ready(function () {
      // some data
      addData();

      // setup
      $('#addTodo').click(function () {
        var comment = $('#newTodo').val();
        todoList.add(comment);
        $('#newTodo').val('');
        renderTodoList();
      });
    });
    
    function renderTodoList() {
      $('#tbodyTodos').empty();
      var markup = '<tr><td><input type="checkbox" onclick="toggleTodo(${id})" ${checkboxAttribute}/></td><td class="${flagClass}">${comment}</td><td><button onclick="removeTodo(${id})" >x</button></td></tr>';
      $.template('todoTemplate', markup);
      $.tmpl('todoTemplate', todoList.todos).appendTo('#tbodyTodos');
    }

    function removeTodo(id) {
      todoList.remove(id);
      renderTodoList();
    }

    function toggleTodo(id) {
      todoList.toggleFlag(id);
      renderTodoList();
    }

    function addData() {
      todoList.add('guardare semifinale basketball arg usa su obs9');
      todoList.add('mela?');
      todoList.add('telefonare all\'idraulico');
      renderTodoList();
    }
  </script>
</head>
<body>
  <div>
    <h2>TODOS</h2>
    <input type="text" id="newTodo" size="50" />
    <button id="addTodo">add</button>
    <table id="tableTodos">
      <tbody id="tbodyTodos"></tbody>
    </table>
  </div>
</body>
</html>
